<template>
  <div style="margin-top: 20px">
    <ko-card :title="$t('business.network.service_port')">
      <table style="width: 100%; padding: 0" class="tab-table">
        <tr>
          <th scope="col" width="20%" align="left">
            <label>{{ $t("business.network.port_name") }}</label>
          </th>
          <th scope="col" width="20%" align="left">
            <label>{{ $t("business.network.listening_port") }}</label>
          </th>
          <th scope="col" width="10%" align="left">
            <label>{{ $t("business.network.protocol") }}</label>
          </th>
          <th scope="col" width="20%" align="left">
            <label>{{ $t("business.network.target_port") }}</label>
          </th>
          <th v-if="type === 'NodePort'" scope="col" width="20%" align="left">
            <label>{{ $t("business.network.node_port") }}</label>
          </th>
          <th />
        </tr>
        <tr v-for="(row, index) in ports" v-bind:key="index">
          <td>
            <el-input v-model="row.name" />
          </td>
          <td>
            <el-input v-model.number="row.port" placeholder="8080" />
          </td>
          <td>
            <el-select v-model="row.protocol" style="width: 100%">
              <el-option label="TCP" value="TCP" />
              <el-option label="UDP" value="UDP" />
            </el-select>
          </td>
          <td>
            <el-input-number v-model="row.targetPort" type="text" />
          </td>
          <th v-if="type === 'NodePort'">
            <el-input-number v-model="row.nodePort" type="number" />
          </th>
          <td>
            <el-button
              type="text"
              style="font-size: 10px"
              @click="onHandleDelete(index)"
            >
              {{ $t("commons.button.delete") }}
            </el-button>
          </td>
        </tr>
        <tr>
          <td align="left">
            <el-button @click="onHandleAdd">{{
              $t("commons.button.add")
            }}</el-button>
          </td>
        </tr>
      </table>
    </ko-card>
  </div>
</template>

<script setup lang="ts">
import KoCard from "@/views/domain/kubeHud/views/components/ko-card/index.vue";
import { onMounted, watch } from "vue";
type Prop = {
  type?: string;
};

const props = defineProps<Prop>();
const ports = defineModel<any[]>("ports");

const onHandleAdd = () => {
  ports.value.push({
    name: "",
    port: "",
    protocol: "TCP",
    targetPort: ""
  });
};

const onHandleDelete = (index: number) => {
  ports.value.splice(index, 1);
};

const onInit = () => {
  if (!ports.value) {
    ports.value = [
      {
        name: "",
        port: "",
        protocol: "TCP",
        targetPort: ""
      }
    ];
  }
};

watch(
  () => props.type,
  newValue => {
    if (newValue !== "NodePort") {
      for (let i = 0; i < ports.value.length; i++) {
        delete ports.value[i].nodePort;
      }
    }
  }
);
onMounted(() => {
  onInit();
});
</script>

<style scoped></style>
